<script setup lang="ts">
import {reactive, ref} from 'vue'
import { AttrAPI } from '@/network/product/attr';
import { hasSaleAttrAPI, spuImageAPI, addSku } from '@/network/product/spu';
import type { AllSpuImg, SaleAttrResponseData, SaleAttr, SpuImg, SkuData} from '@/network/product/spu/type';
import type { AttrResponseData, AttrList, Attr} from '@/network/product/attr/type';
import type { SpuData } from '@/network/product/spu/type';
import { ElMessage } from 'element-plus';
    // 点击取消
   const emit = defineEmits(['changeIsShow'])
    function cancel() {
        emit('changeIsShow', {
            params: ''
        })
    }
    const attrArr = ref<AttrList>([])
    const saleArr = ref<SaleAttr[]>([])
    const imgArr = ref<SpuImg[]>([])
// 对父组件暴漏方法
   async function initSkuData(spu: SpuData, c1Id: number | string, c2Id: number | string) {
    // 清空sku参数，再添加
    Object.assign(skuParams, {
        category3Id: '',
        spuId: '',
        tmId: '', // 品牌id
        skuName: '',
        price: '',
        weight: '',
        skuDesc: '',
        skuAttrValueList: [], // 平台属性
        skuSaleAttrValueList: [],// 销售属性
        skuDefaultImg: '' // sku图片地址
    })
    // 收集添加sku所需参数
        skuParams.category3Id = spu.category3Id
        skuParams.spuId = spu.id
        skuParams.tmId = spu.tmId
        // 初始化sku数据
        // 平台属性接口
        console.log(spu, c1Id, c2Id);
        const res1: AttrResponseData = await AttrAPI(c1Id, c2Id, spu.category3Id)
        console.log(res1);
        //  spu已有的销售属性
        const res2: SaleAttrResponseData = await hasSaleAttrAPI(spu.id)
        console.log(res2);
        // spu下全部售卖商品的图片
        const res3:AllSpuImg = await spuImageAPI(spu.id)
        console.log(res3);
        attrArr.value = res1.data
        saleArr.value = res2.data
        imgArr.value = res3.data
    }
    defineExpose({initSkuData})

    const kk = ref('kk')
    // 收集sku的参数
    const skuParams = reactive<SkuData>({
    category3Id: '',
    spuId: '',
    tmId: '', // 品牌id
    skuName: '',
    price: '',
    weight: '',
    skuDesc: '',
    skuAttrValueList: [], // 平台属性
    skuSaleAttrValueList: [],// 销售属性
    skuDefaultImg: '' // sku图片地址
})

// table实例
const table = ref<any>()
// 设置默认
function handler(row: SpuImg) {
    // console.log(table.value);
    // 复选框选中
    // 先清空，再选择
    table.value.clearSelection()
    table.value.toggleRowSelection(row, true)
    // 收集图片地址
    console.log(row.imgUrl);
    skuParams.skuDefaultImg = row.imgUrl
}

async function save() {
    // 整理参数
    // 平台属性
    skuParams.skuAttrValueList = attrArr.value.reduce((prev, current: Attr) => {
        if (current.attrIdAndValueId) {
            const [attrId, valueId] = current.attrIdAndValueId.split(':')
            prev.push({
                attrId,
                valueId
            })
        }
        return prev
    }, [])
    // 销售属性
    skuParams.skuSaleAttrValueList = saleArr.value.reduce((prev, current: SaleAttr ) => {
        if (current.saleIdAndValueId) {
            const [saleAttrId, saleAttrValueId] = current.saleIdAndValueId.split(':')
            prev.push({
                saleAttrId,
                saleAttrValueId
            })
        }
        return prev
    }, [])
    // 发请求
    const res = await addSku(skuParams)
    if (res.code === 200) {
        ElMessage({
            type: 'success',
            message: 'sku添加成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: 'sku添加失败'
        })
    }
    // 回到spu界面
    emit('changeIsShow', {
            params: ''
        })
}

</script>


<template>
    <el-form label-width="100px">
        <el-form-item label="sku名称">
            <el-input placeholder="sku名称" v-model="skuParams.skuName"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)">
            <el-input v-model="skuParams.price" type="number" placeholder="价格(元)"></el-input>
        </el-form-item>
        <el-form-item label="重量(克)">
            <el-input v-model="skuParams.weight" type="number" placeholder="重量(克)"></el-input>
        </el-form-item>
        <el-form-item label="sku描述">
            <el-input v-model="skuParams.skuDesc" type="textarea" placeholder="sku描述"></el-input>
        </el-form-item>
        <el-form-item label="平台属性">
            <el-form :inline="true" label-width="88px">
                <el-form-item style="width: 188px; margin: 5px 0;" :label="item.attrName" v-for="item,index in attrArr" :key="item.id">
                    <el-select v-model="item.attrIdAndValueId">
                        <el-option :value="`${item.id}:${attrValue.id}`" v-for="attrValue,index in item.attrValueList" :label="attrValue.valueName" :key="attrValue.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-form :inline="true">
                <el-form-item style="width: 140px;"  :label="item.saleAttrName" v-for="item, index in saleArr" :key="item.id">
                    <el-select v-model="item.saleIdAndValueId">
                        <el-option :value="`${item.id}:${saleAttrValue.id}`" v-for="saleAttrValue in item.spuSaleAttrValueList" :label="saleAttrValue.saleAttrValueName" :key="saleAttrValue.id"></el-option>
                    </el-select>
                </el-form-item>
           </el-form>
        </el-form-item>
        <el-form-item>
            <el-table border :data="imgArr" ref="table">
                <el-table-column type="selection" align="center" width="80px"></el-table-column>
                <el-table-column label="图片">
                    <template #="{row, $index}">
                        <el-image :src="row.imgUrl" style="width: 100px; height: 100px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="imgName"></el-table-column>
                <el-table-column label="操作">
                    <template #="{row, $index}">
                        <el-button type="primary" @click="handler(row)">设置默认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="cancel">取消</el-button>
        </el-form-item>
    </el-form>
</template>


<style scoped lang='scss'>

</style>